<template>
  <view class="help-res">
    <view class="help-res-top"> </view>
    <view v-if="result === '1'">
      <view class="help-res-box help-res-pay">
        <image class="success-icon" :src="success" />
        <view>支付成功 </view>
      </view>

      <view class="help-res-box">
        <view class="help-res-lq"> 本期配药预约完成 </view>

        <view style="color: rgba(0, 0, 0, 0.55)">
          预计于
          <text style="color: #f34e1c">{{ time }}</text
          >送达，请耐心等待。
        </view>

        <view class="help-res-watch-info" @click="watchInfo">查看预约详情</view>
      </view>

      <view class="help-res-box sanding">
        点击“更多服务”查看会员全部服务及相关权益说明
        <view class="help-res-watch-info" @click="allServices">更多服务</view>
      </view>
    </view>

    <view v-else>
      <view class="help-res-box help-res-error">
        <image class="success-icon" :src="error" />
        <view style="color: #f63434">支付失败 </view>
        <text class="with">应付金额: ￥{{ total }}元</text>
        <view class="reStart-box">
          <view class="reStart" @click="go_blac">返 回</view>
          <view class="reStart" @click="reStart">重新支付</view>
        </view>
      </view>

      <view class="help-res-with"> </view>
    </view>
  </view>
</template>

<script>
import success from '@/static/icon/success.png';
import error from '@/static/icon/error.png';

import { orderPay } from '@/api/drugInfo';

export default {
  data() {
    return {
      success,
      error,
      time: '',
      patientId: '',
      result: '1', // 支付结果
      orderId: '',
      payInfo: null
    };
  },

  onLoad(opt) {
    if (opt) {
      if (opt.query) {
        const decode = decodeURIComponent(opt.query);
        const params = JSON.parse(decode);
        this.time = params.time;
        this.patientId = params.patientId;
        this.result = params.result;
        this.orderId = params.orderId;
        this.payInfo = JSON.parse(params.pay);
      } else {
        this.time = opt.time;
        this.patientId = opt.patientId;
        this.result = opt.result;
      }
    } else {
      uni.showModal({
        content: '参数错误',
        showCancel: false
      });
      // this.result = '0';
      // this.with = 199.99;
      // this.time = '2021-06-08';
      // this.patientId = '3dd45d7114af46ce80f9776c15083f66';
    }
  },

  computed: {
    total: function () {
      if (!this.payInfo) return '0.00';
      const t = Number(this.payInfo[0].amount) + Number(this.payInfo[0].freightAmount);
      return t.toFixed(2);
    }
  },

  methods: {
    watchInfo() {
      this.$wxPromise.navigateTo({
        url: '/pages/drugOrder/index?patientId=' + this.patientId
      });
    },

    allServices() {
      uni.reLaunch({
        // url: '/pages/service/index?patientId=' + this.patientId
        url: '/pages/index/index?patientId=' + this.patientId
      });
    },

    async reStart() {
      const self = this;
      const _orderInfo = await orderPay(this.orderId, this.payInfo);
      if (_orderInfo.code !== 0) {
        uni.showToast({
          title: '调用支付失败',
          icon: 'none'
        });
        return;
      }
      const doc = JSON.parse(_orderInfo.data.payInfo);
      let params = {
        appId: doc.appId,
        nonceStr: doc.nonceStr,
        package: doc.package, // 固定值，以微信支付文档为主
        timeStamp: doc.timeStamp,
        paySign: doc.paySign,
        signType: doc.signType // 根据签名算法生成签名
      };

      uni.requestPayment({
        provider: 'wxpay',
        ...params,
        success: (win) => {
          uni.showToast({
            title: '支付成功，跳转中',
            icon: 'none',
            mask: true
          });
          setTimeout(() => {
            const params = `pages/registerResult/index?time=${self.time}&patientId=${self.patientId}&result=1`;
            uni.reLaunch({
              url: params
            });
          }, 1500);
        },
        fail: function (err) {
          const d1 = JSON.stringify(self.payInfo);
          uni.showToast({
            title: '支付失败，跳转中',
            icon: 'none',
            mask: true
          });
          setTimeout(() => {
            const params = `pages/registerResult/index?time=${self.time}&patientId=${self.patientId}&result=0&orderId=${self.orderId}&pay=${d1}`;
            uni.reLaunch({
              url: params
            });
          }, 1500);
        }
      });
    },

    go_blac() {
      uni.reLaunch({
        url: 'pages/drugOrder/index?patientId=' + this.patientId
      });
    }
  }
};
</script>

<style lang="scss">
.help-res {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .success-icon {
    width: 86rpx;
    height: 86rpx;
  }
  &-top {
    background: linear-gradient(186deg, #fb6f6f 0%, #f63434 100%);
    height: 210rpx;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: -1;
  }

  &-box {
    background: #ffffff;
    margin: 24rpx;
    border-radius: 24rpx;
    padding: 32rpx;
    font-size: 36rpx;
    text-align: center;
  }
  &-pay {
    font-size: 36rpx;
    font-weight: 500;
    padding: 60rpx 32rpx;
  }
  &-error {
    font-size: 36rpx;
    padding: 60rpx 32rpx;
    .with {
      font-size: 28rpx;
      margin: 32rpx 0;
      display: block;
    }
    .reStart {
      width: 240rpx;
      height: 76rpx;
      border: 1px solid #f34e1c;
      border-radius: 44rpx;
      color: #f34e1c;
      font-size: 32rpx;
      text-align: center;
      line-height: 76rpx;
    }
  }
  .reStart-box {
    height: 88rpx;
    font-size: 36rpx;
    color: #ffffff;
    text-align: center;
    line-height: 88rpx;
    margin-top: 50rpx;
    display: flex;
    justify-content: space-around;
  }
  &-gx {
    font-size: 48rpx;
    margin: 12rpx 0;
  }
  &-lq {
    font-size: 36rpx;
    font-weight: 500;
    margin: 24rpx 0 30rpx;
  }
  &-watch-info {
    font-size: 28rpx;
    color: #2680eb;
    text-align: center;
    margin-top: 20rpx;
  }
  .sanding {
    font-size: 32rpx;
  }
}
</style>
